<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
    <style>
        /* 
            :root 表示网页中的根元素
            :empty 表示页面中的空元素
            :first-child 表示第一个子元素
            :first-of-type 表示同类型中的第一个子元素
            :last-child 表示最后一个子元素
            :last-of-type 表示同类型中的最后一个元素
            :nth-child 选择第n个子元素
            :nth-last-child 选择倒数第n个元素
            :nth-of-type 表示同类型里的第n个元素
            :nth-last-of-type 表示同类型里的倒数第n个元素
                - n 表示0到无穷大
                - 2n 表示偶数
                - 2n+1 表示奇数
                - odd 表示奇数
                - even 表示偶数
            
            :only-child 选中唯一的子元素
            :only-of-type 选中同类型中唯一的子元素

        
        */

        p:empty{
            /* width设置元素的宽度 */
            width: 200px;
            /* height设置元素的高度 */
            height: 200px;
            background-color: yellow;
        }

        /* div>p:first-child{
            background-color: orange;
        } */

        /* div>p:first-of-type{
            background-color: orange;
        } */

        /* div > p:nth-child(2n+1){
            background-color: tomato;
        } */
       
        /* div > p:nth-last-child(1){
            background-color: tomato;
        } */

        /* div > p:nth-of-type(even){
            background-color: tomato;
        } */

        /* span:only-child{
            color: chocolate;
        } */

        span:only-of-type{
            color: chocolate;
        }
    </style>
</head>
<body>

    <p>第一个p元素</p>
    <div>   
        <span>哈哈</span>
        <p>第二个p元素</p>
        <p>第三个p元素</p>
        <p>第四个p元素</p>
        <p>第五个p元素</p>
    </div>

    <div>
        <span>我是第二个div中的span</span>
    </div>
    <p></p>
    
</body>
</html>